<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 - 校园生活助手系统</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
    <!-- 引入自定义CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        
        :root {
            --primary-color: #165DFF;
            --secondary-color: #0A2463;
            --accent-color: #3E92CC;
            --text-color: #333;
            --text-light: #666;
            --bg-color: #F8F9FA;
            --card-bg: #fff;
            --border-radius: 12px;
            --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
        }
        
        /* 顶部导航栏 */
        .header {
            background-color: var(--card-bg);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        
        .navbar {
            padding: 0.75rem 1.5rem;
        }
        
        .navbar-brand {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
            color: var(--primary-color);
            font-size: 1.25rem;
        }
        
        .navbar-brand img {
            width: 32px;
            height: 32px;
        }
        
        .navbar-nav {
            margin-left: auto;
            gap: 1.5rem;
        }
        
        .nav-item .nav-link {
            color: var(--text-color);
            font-weight: 500;
            transition: var(--transition);
            position: relative;
            padding: 0.5rem 0;
            margin: 0 0.5rem;
        }
        
        .nav-item .nav-link:hover,
        .nav-item .nav-link.active {
            color: var(--primary-color);
        }
        
        .nav-item .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--primary-color);
            border-radius: 2px;
        }
        
        .navbar-search {
            position: relative;
            width: 250px;
        }
        
        .navbar-search input {
            width: 100%;
            padding: 8px 15px 8px 40px;
            border: 1px solid #E5E7EB;
            border-radius: 20px;
            font-size: 0.9rem;
            transition: var(--transition);
        }
        
        .navbar-search input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1);
        }
        
        .navbar-search i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #A0AEC0;
            font-size: 0.9rem;
        }
        
        .user-profile {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            position: relative;
            padding: 0.5rem;
            border-radius: 8px;
            transition: var(--transition);
        }
        
        .user-profile:hover {
            background-color: rgba(22, 93, 255, 0.05);
        }
        
        .avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--primary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 0.9rem;
            overflow: hidden;
        }
        
        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .user-info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        
        .user-name {
            font-weight: 500;
            font-size: 0.9rem;
            color: var(--text-color);
        }
        
        .user-role {
            font-size: 0.75rem;
            color: var(--text-light);
        }
        
        .user-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 5px;
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            min-width: 200px;
            display: none;
            z-index: 1001;
        }
        
        .user-profile:hover .user-dropdown {
            display: block;
        }
        
        .dropdown-item {
            padding: 12px 15px;
            color: var(--text-color);
            text-decoration: none;
            display: block;
            transition: var(--transition);
            border: none;
            background: none;
            width: 100%;
            text-align: left;
            font-size: 0.9rem;
        }
        
        .dropdown-item:hover {
            background-color: rgba(22, 93, 255, 0.05);
            color: var(--primary-color);
        }
        
        .dropdown-item i {
            margin-right: 10px;
            width: 16px;
            text-align: center;
        }
        
        .dropdown-divider {
            height: 1px;
            background-color: #E5E7EB;
            margin: 5px 0;
        }
        
        /* 主要内容区 */
        .main-content {
            flex: 1;
            display: flex;
        }
        
        /* 侧边栏 */
        .sidebar {
            width: 240px;
            background-color: var(--card-bg);
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
            position: fixed;
            height: calc(100vh - 60px);
            overflow-y: auto;
            transition: var(--transition);
        }
        
        .sidebar.collapsed {
            width: 80px;
        }
        
        .sidebar-header {
            padding: 1.5rem;
            border-bottom: 1px solid #E5E7EB;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .sidebar-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--secondary-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .sidebar-toggle {
            background: none;
            border: none;
            color: var(--text-light);
            font-size: 1.2rem;
            cursor: pointer;
            transition: var(--transition);
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
        }
        
        .sidebar-toggle:hover {
            background-color: rgba(22, 93, 255, 0.05);
            color: var(--primary-color);
        }
        
        .sidebar-menu {
            padding: 1rem 0;
        }
        
        .menu-section {
            margin-bottom: 1.5rem;
        }
        
        .menu-section-title {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            color: var(--text-light);
            padding: 0 1.5rem 0.5rem;
            letter-spacing: 0.5px;
        }
        
        .menu-item {
            list-style: none;
        }
        
        .menu-link {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 0.8rem 1.5rem;
            color: var(--text-color);
            text-decoration: none;
            transition: var(--transition);
            position: relative;
            border-left: 3px solid transparent;
        }
        
        .menu-link:hover {
            background-color: rgba(22, 93, 255, 0.05);
            color: var(--primary-color);
        }
        
        .menu-link.active {
            background-color: rgba(22, 93, 255, 0.1);
            color: var(--primary-color);
            border-left-color: var(--primary-color);
        }
        
        .menu-icon {
            font-size: 1.1rem;
            width: 20px;
            text-align: center;
        }
        
        .menu-text {
            font-weight: 500;
            font-size: 0.95rem;
        }
        
        .sidebar.collapsed .menu-text,
        .sidebar.collapsed .sidebar-title,
        .sidebar.collapsed .menu-section-title {
            display: none;
        }
        
        .sidebar.collapsed .menu-link {
            justify-content: center;
            padding: 0.8rem 0;
        }
        
        /* 内容区域 */
        .content {
            flex: 1;
            margin-left: 240px;
            padding: 2rem;
            transition: var(--transition);
        }
        
        .sidebar.collapsed ~ .content {
            margin-left: 80px;
        }
        
        .page-header {
            margin-bottom: 2rem;
        }
        
        .page-title {
            font-size: 2rem;
            font-weight: 600;
            color: var(--secondary-color);
            margin-bottom: 0.5rem;
        }
        
        .page-subtitle {
            color: var(--text-light);
            font-size: 1rem;
        }
        
        /* 统计卡片 */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .stat-card {
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            padding: 1.5rem;
            box-shadow: var(--box-shadow);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background-color: var(--primary-color);
        }
        
        .stat-card.yellow::before {
            background-color: #F59E0B;
        }
        
        .stat-card.green::before {
            background-color: #10B981;
        }
        
        .stat-card.red::before {
            background-color: #EF4444;
        }
        
        .stat-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
        }
        
        .stat-title {
            font-size: 0.9rem;
            color: var(--text-light);
            font-weight: 500;
        }
        
        .stat-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(22, 93, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-color);
            font-size: 1.2rem;
        }
        
        .stat-card.yellow .stat-icon {
            background-color: rgba(245, 158, 11, 0.1);
            color: #F59E0B;
        }
        
        .stat-card.green .stat-icon {
            background-color: rgba(16, 185, 129, 0.1);
            color: #10B981;
        }
        
        .stat-card.red .stat-icon {
            background-color: rgba(239, 68, 68, 0.1);
            color: #EF4444;
        }
        
        .stat-value {
            font-size: 2rem;
            font-weight: 700;
            color: var(--secondary-color);
            margin-bottom: 0.5rem;
        }
        
        .stat-change {
            display: flex;
            align-items: center;
            font-size: 0.85rem;
            font-weight: 500;
        }
        
        .stat-change.positive {
            color: #10B981;
        }
        
        .stat-change.negative {
            color: #EF4444;
        }
        
        .stat-change i {
            margin-right: 5px;
            font-size: 0.75rem;
        }
        
        /* 图表区域 */
        .charts-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .chart-card {
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            padding: 1.5rem;
            box-shadow: var(--box-shadow);
        }
        
        .chart-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.5rem;
        }
        
        .chart-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--secondary-color);
        }
        
        .chart-period {
            display: flex;
            gap: 5px;
        }
        
        .period-btn {
            padding: 5px 12px;
            border: 1px solid #E5E7EB;
            background-color: white;
            color: var(--text-color);
            font-size: 0.8rem;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .period-btn:first-child {
            border-radius: 6px 0 0 6px;
        }
        
        .period-btn:last-child {
            border-radius: 0 6px 6px 0;
        }
        
        .period-btn.active {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        .chart-container {
            position: relative;
            height: 250px;
        }
        
        /* 最近活动 */
        .recent-activities {
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            padding: 1.5rem;
            box-shadow: var(--box-shadow);
            margin-bottom: 2rem;
        }
        
        .activities-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.5rem;
        }
        
        .activities-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--secondary-color);
        }
        
        .view-all {
            color: var(--primary-color);
            text-decoration: none;
            font-size: 0.9rem;
            font-weight: 500;
            transition: var(--transition);
        }
        
        .view-all:hover {
            text-decoration: underline;
        }
        
        .activity-list {
            list-style: none;
            padding: 0;
        }
        
        .activity-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 1rem 0;
            border-bottom: 1px solid #F3F4F6;
        }
        
        .activity-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }
        
        .activity-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: rgba(22, 93, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-color);
            font-size: 0.9rem;
            flex-shrink: 0;
        }
        
        .activity-content {
            flex: 1;
        }
        
        .activity-text {
            font-size: 0.95rem;
            color: var(--text-color);
            margin-bottom: 5px;
        }
        
        .activity-time {
            font-size: 0.8rem;
            color: var(--text-light);
        }
        
        /* 任务区域 */
        .tasks-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
        }
        
        .task-card {
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            padding: 1.5rem;
            box-shadow: var(--box-shadow);
        }
        
        .task-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.5rem;
        }
        
        .task-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--secondary-color);
        }
        
        .task-list {
            list-style: none;
            padding: 0;
        }
        
        .task-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 0.8rem 0;
            border-bottom: 1px solid #F3F4F6;
            transition: var(--transition);
        }
        
        .task-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }
        
        .task-checkbox {
            position: relative;
            flex-shrink: 0;
        }
        
        .task-checkbox input[type="checkbox"] {
            width: 20px;
            height: 20px;
            cursor: pointer;
        }
        
        .task-info {
            flex: 1;
        }
        
        .task-name {
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--text-color);
            margin-bottom: 3px;
        }
        
        .task-name.completed {
            text-decoration: line-through;
            color: var(--text-light);
        }
        
        .task-deadline {
            font-size: 0.8rem;
            color: var(--text-light);
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .task-priority {
            font-size: 0.75rem;
            font-weight: 600;
            padding: 3px 8px;
            border-radius: 12px;
            text-transform: uppercase;
        }
        
        .task-priority.high {
            background-color: rgba(239, 68, 68, 0.1);
            color: #EF4444;
        }
        
        .task-priority.medium {
            background-color: rgba(245, 158, 11, 0.1);
            color: #F59E0B;
        }
        
        .task-priority.low {
            background-color: rgba(16, 185, 129, 0.1);
            color: #10B981;
        }
        
        /* 响应式设计 */
        @media (max-width: 1200px) {
            .charts-grid {
                grid-template-columns: 1fr;
            }
            
            .stats-grid {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            }
        }
        
        @media (max-width: 992px) {
            .navbar-search {
                width: 200px;
            }
            
            .navbar-nav {
                gap: 1rem;
            }
        }
        
        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
            }
            
            .sidebar.active {
                transform: translateX(0);
            }
            
            .content {
                margin-left: 0;
                padding: 1rem;
            }
            
            .navbar-search {
                display: none;
            }
            
            .page-title {
                font-size: 1.5rem;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 576px) {
            .navbar {
                padding: 0.5rem 1rem;
            }
            
            .navbar-nav {
                gap: 0.5rem;
            }
            
            .content {
                padding: 1rem 0.5rem;
            }
            
            .stat-card,
            .chart-card,
            .recent-activities,
            .task-card {
                padding: 1rem;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="header">
        <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="{{ url_for('index') }}">
                <i class="fa fa-graduation-cap"></i>
                校园生活助手
            </a>
            
            <button class="navbar-toggler" type="button" id="sidebar-toggle-btn">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <div class="navbar-search">
                    <i class="fa fa-search"></i>
                    <input type="text" placeholder="搜索课程、作业、通知...">
                </div>
                
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" href="{{ url_for('index') }}"><i class="fa fa-home"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('courses') }}"><i class="fa fa-book"></i> 课程</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('messages') }}"><i class="fa fa-comments"></i> 消息</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('calendar') }}"><i class="fa fa-calendar"></i> 日历</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('settings') }}"><i class="fa fa-cog"></i> 设置</a>
                    </li>
                </ul>
            </div>
            
            <div class="user-profile">
                <div class="avatar">
                    <img src="https://picsum.photos/id/1005/200/200" alt="用户头像">
                </div>
                <div class="user-info">
                    <div class="user-name">张三</div>
                    <div class="user-role">学生</div>
                </div>
                <i class="fa fa-angle-down"></i>
                
                <div class="user-dropdown">
                    <button class="dropdown-item">
                        <i class="fa fa-user"></i>
                        个人资料
                    </button>
                    <button class="dropdown-item">
                        <i class="fa fa-cog"></i>
                        账号设置
                    </button>
                    <div class="dropdown-divider"></div>
                    <button class="dropdown-item">
                        <i class="fa fa-question-circle"></i>
                        帮助中心
                    </button>
                    <button class="dropdown-item">
                        <i class="fa fa-sign-out"></i>
                        退出登录
                    </button>
                </div>
            </div>
        </nav>
    </header>
    
    <!-- 主要内容区 -->
    <div class="main-content">
        <!-- 侧边栏 -->
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <div class="sidebar-title">
                    <i class="fa fa-th-large"></i> 导航菜单
                </div>
                <button class="sidebar-toggle" id="collapse-sidebar">
                    <i class="fa fa-angle-left"></i>
                </button>
            </div>
            
            <ul class="sidebar-menu">
                <li class="menu-section">
                    <div class="menu-section-title">主菜单</div>
                    <li class="menu-item">
                        <a href="{{ url_for('index') }}" class="menu-link active">
                            <i class="fa fa-dashboard menu-icon"></i>
                            <span class="menu-text">仪表盘</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="{{ url_for('my_courses') }}" class="menu-link">
                            <i class="fa fa-book menu-icon"></i>
                            <span class="menu-text">我的课程</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="{{ url_for('assignments') }}" class="menu-link">
                            <i class="fa fa-tasks menu-icon"></i>
                            <span class="menu-text">作业任务</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="{{ url_for('calendar') }}" class="menu-link">
                            <i class="fa fa-calendar menu-icon"></i>
                            <span class="menu-text">课程表</span>
                        </a>
                    </li>
                </li>
                
                <li class="menu-section">
                    <div class="menu-section-title">学习资源</div>
                    <li class="menu-item">
                        <a href="{{ url_for('study_materials') }}" class="menu-link">
                            <i class="fa fa-file-text menu-icon"></i>
                            <span class="menu-text">学习资料</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="{{ url_for('grades') }}" class="menu-link">
                            <i class="fa fa-bar-chart menu-icon"></i>
                            <span class="menu-text">成绩查询</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="{{ url_for('study_groups') }}" class="menu-link">
                            <i class="fa fa-users menu-icon"></i>
                            <span class="menu-text">学习小组</span>
                        </a>
                    </li>
                </li>
                
                <li class="menu-section">
                    <div class="menu-section-title">校园服务</div>
                    <li class="menu-item">
                        <a href="{{ url_for('library') }}" class="menu-link">
                            <i class="fa fa-bookmark menu-icon"></i>
                            <span class="menu-text">图书馆</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="{{ url_for('campus_events') }}" class="menu-link">
                            <i class="fa fa-flag menu-icon"></i>
                            <span class="menu-text">校园活动</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="{{ url_for('feedback') }}" class="menu-link">
                            <i class="fa fa-comment menu-icon"></i>
                            <span class="menu-text">意见反馈</span>
                        </a>
                    </li>
                </li>
            </ul>
        </aside>
        
        <!-- 内容区域 -->
        <main class="content">
            <div class="page-header">
                <h1 class="page-title">欢迎回来，张三</h1>
                <p class="page-subtitle"><i class="fa fa-calendar"></i> {{ current_date }}</p>
            </div>
            
            <!-- 统计卡片 -->
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-header">
                        <span class="stat-title">进行中课程</span>
                        <div class="stat-icon">
                            <i class="fa fa-book"></i>
                        </div>
                    </div>
                    <div class="stat-value">8</div>
                    <div class="stat-change positive">
                        <i class="fa fa-arrow-up"></i>
                        <span>较上学期增加2门</span>
                    </div>
                </div>
                
                <div class="stat-card yellow">
                    <div class="stat-header">
                        <span class="stat-title">待完成作业</span>
                        <div class="stat-icon">
                            <i class="fa fa-tasks"></i>
                        </div>
                    </div>
                    <div class="stat-value">3</div>
                    <div class="stat-change negative">
                        <i class="fa fa-arrow-up"></i>
                        <span>较昨日增加1项</span>
                    </div>
                </div>
                
                <div class="stat-card green">
                    <div class="stat-header">
                        <span class="stat-title">已完成测验</span>
                        <div class="stat-icon">
                            <i class="fa fa-check-square"></i>
                        </div>
                    </div>
                    <div class="stat-value">12</div>
                    <div class="stat-change positive">
                        <i class="fa fa-arrow-up"></i>
                        <span>本周完成4项</span>
                    </div>
                </div>
                
                <div class="stat-card red">
                    <div class="stat-header">
                        <span class="stat-title">通知消息</span>
                        <div class="stat-icon">
                            <i class="fa fa-bell"></i>
                        </div>
                    </div>
                    <div class="stat-value">5</div>
                    <div class="stat-change positive">
                        <i class="fa fa-arrow-up"></i>
                        <span>今日新增2条</span>
                    </div>
                </div>
            </div>
            
            <!-- 图表区域 -->
            <div class="charts-grid">
                <div class="chart-card">
                    <div class="chart-header">
                        <h3 class="chart-title">学习进度追踪</h3>
                        <div class="chart-period">
                            <button class="period-btn active">周</button>
                            <button class="period-btn">月</button>
                            <button class="period-btn">学期</button>
                        </div>
                    </div>
                    <div class="chart-container">
                        <canvas id="studyProgressChart"></canvas>
                    </div>
                </div>
                
                <div class="chart-card">
                    <div class="chart-header">
                        <h3 class="chart-title">成绩分布</h3>
                        <div class="chart-period">
                            <button class="period-btn active">本学期</button>
                            <button class="period-btn">上学期</button>
                        </div>
                    </div>
                    <div class="chart-container">
                        <canvas id="gradesDistributionChart"></canvas>
                    </div>
                </div>
            </div>
            
            <!-- 最近活动 -->
            <div class="recent-activities">
                <div class="activities-header">
                    <h3 class="activities-title">最近活动</h3>
                    <a href="{{ url_for('activities') }}" class="view-all">查看全部</a>
                </div>
                
                <ul class="activity-list">
                    <li class="activity-item">
                        <div class="activity-icon">
                            <i class="fa fa-file-text"></i>
                        </div>
                        <div class="activity-content">
                            <div class="activity-text">
                                <strong>高等数学</strong> 课程发布了新的学习资料
                            </div>
                            <div class="activity-time">
                                <i class="fa fa-clock-o"></i>
                                2小时前
                            </div>
                        </div>
                    </li>
                    
                    <li class="activity-item">
                        <div class="activity-icon">
                            <i class="fa fa-tasks"></i>
                        </div>
                        <div class="activity-content">
                            <div class="activity-text">
                                <strong>数据结构</strong> 布置了新作业《链表实现》
                            </div>
                            <div class="activity-time">
                                <i class="fa fa-clock-o"></i>
                                昨天 15:30
                            </div>
                        </div>
                    </li>
                    
                    <li class="activity-item">
                        <div class="activity-icon">
                            <i class="fa fa-check-circle"></i>
                        </div>
                        <div class="activity-content">
                            <div class="activity-text">
                                你完成了 <strong>计算机网络</strong> 的测验，得分92分
                            </div>
                            <div class="activity-time">
                                <i class="fa fa-clock-o"></i>
                                2天前
                            </div>
                        </div>
                    </li>
                    
                    <li class="activity-item">
                        <div class="activity-icon">
                            <i class="fa fa-users"></i>
                        </div>
                        <div class="activity-content">
                            <div class="activity-text">
                                你加入了学习小组 <strong>Python编程爱好者</strong>
                            </div>
                            <div class="activity-time">
                                <i class="fa fa-clock-o"></i>
                                3天前
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            
            <!-- 任务区域 -->
            <div class="tasks-section">
                <div class="task-card">
                    <div class="task-header">
                        <h3 class="task-title">待完成作业</h3>
                        <a href="{{ url_for('assignments') }}" class="view-all">查看全部</a>
                    </div>
                    
                    <ul class="task-list">
                        <li class="task-item">
                            <div class="task-checkbox">
                                <input type="checkbox" id="task1">
                            </div>
                            <div class="task-info">
                                <div class="task-name">高等数学作业</div>
                                <div class="task-deadline">
                                    <i class="fa fa-calendar-check-o"></i>
                                    明天 23:59前
                                </div>
                            </div>
                            <span class="task-priority high">高</span>
                        </li>
                        
                        <li class="task-item">
                            <div class="task-checkbox">
                                <input type="checkbox" id="task2">
                            </div>
                            <div class="task-info">
                                <div class="task-name">数据结构实验报告</div>
                                <div class="task-deadline">
                                    <i class="fa fa-calendar-check-o"></i>
                                    周五 23:59前
                                </div>
                            </div>
                            <span class="task-priority high">高</span>
                        </li>
                        
                        <li class="task-item">
                            <div class="task-checkbox">
                                <input type="checkbox" id="task3">
                            </div>
                            <div class="task-info">
                                <div class="task-name">英语听力练习</div>
                                <div class="task-deadline">
                                    <i class="fa fa-calendar-check-o"></i>
                                    周六 23:59前
                                </div>
                            </div>
                            <span class="task-priority medium">中</span>
                        </li>
                    </ul>
                </div>
                
                <div class="task-card">
                    <div class="task-header">
                        <h3 class="task-title">今日课程</h3>
                        <a href="{{ url_for('timetable') }}" class="view-all">完整课表</a>
                    </div>
                    
                    <ul class="task-list">
                        <li class="task-item">
                            <div class="task-icon">
                                <i class="fa fa-book"></i>
                            </div>
                            <div class="task-info">
                                <div class="task-name">高等数学</div>
                                <div class="task-deadline">
                                    <i class="fa fa-clock-o"></i>
                                    08:30-10:00 | 教2-301
                                </div>
                            </div>
                        </li>
                        
                        <li class="task-item">
                            <div class="task-icon">
                                <i class="fa fa-book"></i>
                            </div>
                            <div class="task-info">
                                <div class="task-name">程序设计基础</div>
                                <div class="task-deadline">
                                    <i class="fa fa-clock-o"></i>
                                    10:20-11:50 | 教3-205
                                </div>
                            </div>
                        </li>
                        
                        <li class="task-item">
                            <div class="task-icon">
                                <i class="fa fa-book"></i>
                            </div>
                            <div class="task-info">
                                <div class="task-name">大学物理</div>
                                <div class="task-deadline">
                                    <i class="fa fa-clock-o"></i>
                                    14:00-15:30 | 教1-103
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </main>
    </div>

    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取当前日期
            const today = new Date();
            const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
            document.querySelector('.page-subtitle').innerHTML = `<i class="fa fa-calendar"></i> ${today.toLocaleDateString('zh-CN', options)}`;
            
            // 侧边栏切换
            const sidebar = document.getElementById('sidebar');
            const collapseSidebarBtn = document.getElementById('collapse-sidebar');
            const sidebarToggleBtn = document.getElementById('sidebar-toggle-btn');
            
            collapseSidebarBtn.addEventListener('click', function() {
                sidebar.classList.toggle('collapsed');
                
                // 切换图标
                if (sidebar.classList.contains('collapsed')) {
                    this.innerHTML = '<i class="fa fa-angle-right"></i>';
                } else {
                    this.innerHTML = '<i class="fa fa-angle-left"></i>';
                }
            });
            
            // 移动端侧边栏切换
            sidebarToggleBtn.addEventListener('click', function() {
                sidebar.classList.toggle('active');
            });
            
            // 学习进度图表
            const studyProgressCtx = document.getElementById('studyProgressChart').getContext('2d');
            const studyProgressChart = new Chart(studyProgressCtx, {
                type: 'line',
                data: {
                    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    datasets: [
                        {
                            label: '学习时长(小时)',
                            data: [4.5, 3.2, 5.8, 4.1, 6.2, 7.5, 2.3],
                            backgroundColor: 'rgba(22, 93, 255, 0.1)',
                            borderColor: 'rgba(22, 93, 255, 1)',
                            borderWidth: 3,
                            tension: 0.4,
                            fill: true
                        },
                        {
                            label: '完成任务数',
                            data: [2, 1, 3, 2, 4, 5, 1],
                            backgroundColor: 'rgba(16, 185, 129, 0.1)',
                            borderColor: 'rgba(16, 185, 129, 1)',
                            borderWidth: 3,
                            tension: 0.4,
                            fill: true
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(0, 0, 0, 0.05)'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    },
                    interaction: {
                        mode: 'nearest',
                        axis: 'x',
                        intersect: false
                    }
                }
            });
            
            // 成绩分布图表
            const gradesDistributionCtx = document.getElementById('gradesDistributionChart').getContext('2d');
            const gradesDistributionChart = new Chart(gradesDistributionCtx, {
                type: 'doughnut',
                data: {
                    labels: ['优秀(90-100)', '良好(80-89)', '中等(70-79)', '及格(60-69)', '不及格(0-59)'],
                    datasets: [
                        {
                            data: [35, 30, 20, 10, 5],
                            backgroundColor: [
                                'rgba(16, 185, 129, 1)',
                                'rgba(22, 93, 255, 1)',
                                'rgba(245, 158, 11, 1)',
                                'rgba(239, 68, 68, 0.7)',
                                'rgba(239, 68, 68, 1)'
                            ],
                            borderWidth: 0,
                            hoverOffset: 10
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                boxWidth: 12,
                                padding: 15
                            }
                        }
                    },
                    cutout: '70%'
                }
            });
            
            // 任务完成状态切换
            const taskCheckboxes = document.querySelectorAll('.task-checkbox input[type="checkbox"]');
            taskCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const taskName = this.closest('.task-item').querySelector('.task-name');
                    if (this.checked) {
                        taskName.classList.add('completed');
                    } else {
                        taskName.classList.remove('completed');
                    }
                });
            });
            
            // 图表时间段切换
            const periodButtons = document.querySelectorAll('.period-btn');
            periodButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 移除同组按钮的active状态
                    const parent = this.parentElement;
                    parent.querySelectorAll('.period-btn').forEach(btn => {
                        btn.classList.remove('active');
                    });
                    
                    // 添加当前按钮的active状态
                    this.classList.add('active');
                    
                    // 实际项目中这里可以根据选择的时间段更新图表数据
                    console.log('Selected period:', this.textContent);
                });
            });
            
            // 页面滚动效果
            const mainContent = document.querySelector('.content');
            mainContent.style.opacity = '0';
            setTimeout(() => {
                mainContent.style.transition = 'opacity 0.8s ease';
                mainContent.style.opacity = '1';
            }, 100);
        });
    </script>
</body>
</html>